<template>
  <div id='app'>
    <h2 class='app-title'>
      D o m e 记 事 本 </h2>
    <div class='search'>
      <input type="text"
        v-model='data'>
      <input type="button"
        class='btn' value='添加'
        @click='addData'>
    </div>
    <div class='info'>
      <div class='unfinsh'>
        <h4>未完成</h4>
        <ul>
          <li
            v-for='(item,index) in list'
            :key='index'>
            <input
              type="checkbox"
              @click.prevent='finshed(index)'>
            <span
              class='app-info'>{{index+1+'.'+item}}</span>
            <input
              type="button"
              value='删除'
              class='info-btn'
              @click='deleteData(list,index)'>
          </li>
        </ul>
      </div>
      <div class=' finished'>
        <h4>已完成</h4>
        <ul>
          <li
            v-for='(item,index) in arr'
            :key='index'>
            <span
              class='app-info'>{{index+1+'.'+item}}</span>
            <input
              type="button"
              value='删除'
              class='info-btn'
              @click='deleteData(arr,index)'>
          </li>
        </ul>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      data: '',
      list: ['你好啊我是第一个未完成事件', '这里是第一个测试内容info'],
      arr: ['你好啊我是第一个已完成事件', '完成了一个简单的Dome记事本'],
    }
  },
  methods: {
    addData() {
      this.list.push(this.data)
      this.data = ''
    },
    deleteData(arr, index) {
      console.log(arr)
      if (arr == this.list) {
        this.list.splice(index, 1)
      } else {
        this.arr.splice(index, 1)
      }
    },
    finshed(i) {
      this.arr.push(this.list[i])
      this.list.splice(i, 1)
    },
  },
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}
#app {
  width: 100%;
  height: 100%;
  text-align: center;
}
.app-title {
  display: block;
  font-weight: normal;
  text-align: center;
  margin-top: 80px;
}
.search {
  margin-top: 20px;
}
.info {
  width: 100%;
  height: 300px;
  text-align: center;
}
.info > div {
  display: inline-block;
  width: 300px;
  height: 300px;
  margin-top: 40px;
  overflow: hidden;
}
.info > :first-child {
  border-right: 0.5px solid #000;
}
.search > input {
  outline: none;
}
.btn {
  margin-left: 10px;
  width: 40px;
  height: 25px;
  border: none;
  background-color: #000;
  color: #fff;
  border-radius: 6px;
}
.btn:hover {
  background-color: #bcbcbc;
}
.unfinsh > ul,
.finished > ul {
  margin-top: 5px;
  list-style: none;
  text-align: left;
  width: 100%;
  height: 100%;
}
.unfinsh > ul > li,
.finished > ul > li {
  width: 100%;
  display: inline-block;
  margin-top: 5px;
}
.app-info {
  margin: 0 10px;
}
.info-btn {
  float: right;
  outline: none;
  margin-right: 10px;
}
</style>
